<template>
  <div class="index-container">
    <el-card>
      <h1 style="text-align: center;font-size: 40px">Vue3.0 + ElementUi-Plus + Koa2</h1>
      <p>本项目前端采用:Vue3.0+Vuex+Vue-router+ElementUI-Plus+Typescript+Axios</p>
      <p >本项目后端采用:node+Typescript +Koa2 + routing-controllers+ Typeorm+ioredis+redis+mysql</p>
      <div class="table-wrapper">
        <el-table :data="tableData" v-loading="tableLoading">
          <el-table-column type="index"></el-table-column>
          <el-table-column label="账号" prop="username"></el-table-column>
          <el-table-column label="昵称" prop="nickname"></el-table-column>
          <el-table-column label="ip" prop="ip"></el-table-column>
          <el-table-column label="登录地点" prop="location"></el-table-column>
          <el-table-column label="操作系统" prop="os"></el-table-column>
          <el-table-column label="浏览器" prop="browser"></el-table-column>
          <el-table-column label="登录时间" prop="loginTime"></el-table-column>
        </el-table>
      </div>
      <div class="page-wrapper">
        <el-pagination
            :current-page="searchForm.page"
            :page-size="searchForm.pageSize"
            :page-sizes="[10, 20, 30, 40,50]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentPageChange"
            @size-change="handlePageSizeChange"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
import {defineComponent, reactive, ref} from "vue"
import {getLoginLogList} from "@/api";
export default defineComponent({
  name:'Index',
  setup(){
    const searchForm= reactive({
      page:1,
      pageSize:10
    })
    const total = ref(0)
    const tableData = ref([])
    const tableLoading = ref(false)
    function getLoginLog() {
      tableLoading.value = true
      getLoginLogList(searchForm).then(res=>{
        tableLoading.value =false
        tableData.value = res.data.list
        total.value = res.data.total
      })
    }
    function handleCurrentPageChange(val: number){
      searchForm.page = val
      getLoginLog()
    }
    function handlePageSizeChange(val: number){
      searchForm.pageSize = val
      getLoginLog()
    }
    getLoginLog()
    return {
      searchForm,
      total,
      tableData,
      tableLoading,
      handlePageSizeChange,
      handleCurrentPageChange
    }
  }
})
</script>
<style lang="scss" scoped>
.index-container{
  padding: 10px;
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
  ::v-deep .el-card{
    height: 100%;
    overflow-y: auto;
    ::-webkit-scrollbar{
      width: 0;
      height: 0;
    }
    p{
      font-size: 18px;
      color: #666666;
      max-width: 750px;
      width: 750px;
      margin: 10px auto;
    }
  }
}
</style>
